import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, Animated, TouchableOpacity, findNodeHandle, UIManager, DeviceEventEmitter } from 'react-native';
import { GLOBAL } from '../../../../../../config/global';
import { orderStyle, commonStyle } from '../../_common/style';
import { style } from '../../../../../../theme/style'

const scale = GLOBAL.SCALE;
export class BockCpt extends Component {
    constructor(props) {
        super(props);
        let { visible } = props.data || {};
        this.state = {
            isHeight: visible,
            startHeight: 0,
            imgObj: new Animated.Value(visible ? 0 : 1),
            // heightObj: new Animated.Value(0),
        }
        this.onOff = true;
        this.update = false;
    }

    componentDidMount = () => { }
    // 动画
    _startAnimated = () => {
        let { isHeight, startHeight, heightObj, imgObj } = this.state;
        if (isHeight) {
            Animated.timing(imgObj, { toValue: 0, duration: 200, }).start()
            Animated.timing(heightObj, { toValue: startHeight, duration: 300, }).start(() => { this.setState({ isHeight: !isHeight }) });
        } else {
            Animated.timing(imgObj, { toValue: 1, duration: 200, }).start()
            Animated.timing(heightObj, { toValue: 0, duration: 300 }).start(() => { this.setState({ isHeight: !isHeight }) })
        }
    }

    _onLayout = (event) => {
        let startHeight = 0;
        startHeight = event.nativeEvent.layout.height;
        DeviceEventEmitter.addListener('qycyUpdate', () => {
            if (this.props.type == 'qycy') {
                this.update = true
            }
        });
        if (this.onOff) {
            this.setState({
                startHeight,
                heightObj: new Animated.Value(this.props.data.visible ? startHeight : 0),
                isHeight: true,
            })
            this.onOff = false
        }
        if (this.update && startHeight !== 20) {
            this.setState({
                startHeight,
                heightObj: new Animated.Value(startHeight),
            })
            this.update = false
        }
    }

    render() {
        let { data, renderView, titleStyle, onTitlePress, titleIcon, checkQualificationImage, navigateTo } = this.props || {};
        let { listData, title, refresh, baseInfo, changeIndex, upload, member, ifEdit } = data || {};
        let titleImgObj = require('../../../../../../imgs/global/down.png');
        let { heightObj, imgObj, isHeight, } = this.state;
        const spin = imgObj.interpolate({
            inputRange: [0, 1],//输入值
            outputRange: ['0deg', '-90deg'] //输出值
        })
        return (
            <View style={orderStyle.block}>
                <TouchableOpacity activeOpacity={1} onPress={this._startAnimated} style={[{ padding: 5 * scale }, commonStyle.row2]}>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={[commonStyle.fontTitle, titleStyle]} onPress={() => onTitlePress && onTitlePress()}>{title}</Text>
                        {upload && !isHeight ?
                            <TouchableOpacity onPress={() => checkQualificationImage && checkQualificationImage()} >
                                <Text style={[styles.border, { marginLeft: 10 * scale, fontSize: 12 * scale, color: '#0087FF' }]}>上传/管理资质</Text>
                            </TouchableOpacity>
                            : null
                        }
                        {member && !isHeight && ifEdit ?
                            <TouchableOpacity onPress={() => { navigateTo && navigateTo() }} >
                                <Text style={[styles.border, { marginLeft: 10 * scale, fontSize: 12 * scale, color: '#0087FF' }]}>新增成员</Text>
                            </TouchableOpacity>
                            : null
                        }
                        {titleIcon ? <Image source={titleIcon} style={{ marginLeft: 10 * scale, width: 15 * scale, height: 15 * scale }} /> : null}
                        {changeIndex ? <Text style={styles.changeText}>(变更)</Text> : null}
                    </View>
                    <View style={styles.imgBox}>
                        <Animated.Image style={[styles.imgStyle, { transform: [{ rotate: spin }] }]} source={titleImgObj}></Animated.Image>
                    </View>
                </TouchableOpacity>
                <Animated.View style={{ height: heightObj, overflow: 'hidden' }}>
                    <View ref='zy' onLayout={(event) => { this._onLayout(event) }} style={[styles.body]}>
                        {
                            listData && listData.length ?
                                listData.map((item, index) => {
                                    return renderView(item, index, listData.length, refresh, changeIndex)
                                })
                                : (<Text style={{ fontSize: 10 * scale }}>暂未提交该类数据</Text>)
                        }
                    </View>
                </Animated.View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    imgBox: {
        paddingTop: 5 * scale,
        paddingBottom: 5 * scale,
        paddingLeft: 5 * scale,
        paddingRight: 5 * scale
    },
    imgStyle: {
        tintColor: '#D8D8D8',
        width: 10 * scale,
        height: 6 * scale
    },
    body: {
        paddingTop: 10 * scale,
        paddingBottom: 10 * scale,
    },
    bockCptTitleStyle: {
        fontSize: 12 * scale
    },
    changeText: {
        color: style.color.fontRed1,
        fontSize: 12 * scale,
        paddingLeft: 5 * scale
    },
    border: {
        borderStyle: 'solid',
        borderColor: style.color.themeColor,
        borderWidth: 1 * scale,
        borderRadius: 7 * scale,
        padding: 5 * scale
    }

})